<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>待生产订单</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <!--查询-->
    <el-row>
        <el-form :inline="true" :model="order" class="demo-form-inline">
            <el-form-item label="查询待生产订单: ">
                <el-input v-model="order.id" size="mini" placeholder="输入订单编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="selectPage">查询</el-button>
            </el-form-item>
        </el-form>
        搜索:<el-input v-model="inp" @input="search" size="medium" style="width: 200px;"></el-input>
    </el-row>
    <!--分页查询-->
    <div align="center">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="PageSize"
                layout="total, prev, pager, next,sizes, jumper"
                :total="totalCount"
        ></el-pagination>
    </div>
    <!--表格-->
    <template>
        <el-table
                :data="tOrders"
                border
                style="width: 100%">

            <el-table-column
                    prop="id"
                    label="订单id">
            </el-table-column>
            <el-table-column
                    prop="orderId"
                    :sort-by="['orderId', 'address']"
                    sortable
                    label="订单编号">
            </el-table-column>
            <el-table-column
                    prop="pname"
                    :sort-by="['pname', 'address']"
                    sortable
                    label="产品名称">
            </el-table-column>
            <el-table-column
                    prop="number"
                    :sort-by="['number', 'address']"
                    sortable
                    label="生产数量">
            </el-table-column>
            <el-table-column
                    prop="productionName"
                    :sort-by="['productionName', 'address']"
                    sortable
                    label="生产产线">
            </el-table-column>
            <el-table-column
                    prop="printer"
                    :sort-by="['printer', 'address']"
                    sortable
                    label="使用打印机">
            </el-table-column>
            <el-table-column
                    prop="productTime"
                    :sort-by="['productTime', 'address']"
                    sortable
                    label="生产时间">
            </el-table-column>
            <el-table-column
                    label="生产状态">
                <template slot-scope="scope"><span style="color: red">{{ scope.row.allStatus }}</span></template>
            </el-table-column>
            <el-table-column
                    label="备注">
                <template  slot-scope="scope" >
                    <span v-if="scope.row.remark != null">{{ scope.row.remark }}</span>
                    <span v-if="scope.row.remark == null">无备注</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="mini"
                            v-if="scope.row.allStatus==='待生产'"
                            @click="roleEdit(scope.$index,scope.row)">加入到激光码生产列表</el-button>
                    <el-button
                            type="primary"
                            size="mini"
                            v-else
                            disabled
                            @click="roleEdit(scope.$index,scope.row)">加入到激光码生产列表</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--对话框-->
    <el-dialog title="设置生产记录" :visible.sync="dialogFormVisible" @close="aa">
        <el-form :model="tOrder">
            <el-form-item label="生产产线:" :label-width="formLabelWidth">
                <!--下拉菜单-->
                <el-select v-model="tOrder.productLineId" placeholder="请选择生产产线" :label-width="formLabelWidth">
                    <el-option v-for="tProductionLine in tProductionLines" :key="tProductionLine.id" :label="tProductionLine.productionName" :value="tProductionLine.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="使用打印机:" :label-width="formLabelWidth">
                <!--下拉菜单-->
                <el-select v-model="tOrder.printer" placeholder="请选择打印机" :label-width="formLabelWidth">
                    <el-option v-for="tPrinter in tPrinters" :key="tPrinter.pnum" :label="tPrinter.pnum" :value="tPrinter.pnum">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生产时间: ">
                <el-date-picker type="datetime" v-model="tOrder.productTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveTOrderC">确 定</el-button>
        </div>
    </el-dialog>
    <!--确认跳转的对话框-->
    <el-dialog title="设置生产记录" :visible.sync="dialogVisible" width="30%" @close="cc">
        <span>加入成功!是否跳转至该页面?</span>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="go">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                totalCount: 10,  //默认数据总数
                dialogFormVisible: false, //对话框
                dialogVisible: false,   //确认跳转的对话框
                formLabelWidth: '150px',//表单标签的宽度
                currentPage: 1,  //当前页码
                start: 1,       //查询的页码
                pageSizes: [5,10,15,20],
                PageSize: 5, //默认每页数据量
                select: '',    //下拉菜单选项
                tOrders: null,
                tProductionLines: null, //所有生产产线
                tPrinters: null, //所有打印机
                inp: null,    //搜索框的值
                tOrder: {
                    productLineId: '',
                    printer: '',
                    productTime: '',
                    id: '',
                },
                order:{
                    id: null,
                }
            }
        },

        methods:{
            //搜索框查询
            search(){
                if (this.inp==null||this.inp==''){
                    this.selectPage();
                }else {
                    axios.get("/searchSelect/"+this.inp+"/"+this.currentPage+"/"+this.PageSize).then(value => {
                        if (value.data.code == 1){
                            this.tOrders = value.data.data;
                            this.totalCount = parseInt(value.data.msg);
                        }
                    })
                }
            },
            //分页查询所有
            selectPage(){
                axios.get("/PageTOrder/"+this.order.id+"/"+this.currentPage+"/"+this.PageSize).then(value => {
                    if (value.data.code==1){
                        this.tOrders = value.data.data;
                        this.totalCount = parseInt(value.data.msg);
                    }
                })
            },
            //点击不同的页数，即改变当前的页数
            handleCurrentChange(val){
                console.log(this.order.id);
                if ( this.inp== null){
                    this.currentPage = val;
                    this.selectPage();
                }else{
                    this.currentPage = val;
                    this.search();
                }

            },
            //每页显示的条数，也就是上图选择框内的数据
            handleSizeChange(val){
                // 改变每页显示的条数
                this.PageSize=val;
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1;
                if ( this.inp== null){
                    this.currentPage = val;
                    this.selectPage();
                }else{
                    this.currentPage = val;
                    this.search();
                }
            },
            //加入到激光码生产列表
            roleEdit(index, row){
                this.tOrder = row;
                //查询生产产线和打印机
                console.log(this.tOrder.productTime);
                axios.get("/tProductionLines").then(value => {
                    if (value.data.code === 1){
                        this.tProductionLines=value.data.data;
                        axios.get("/tPrinters").then(value => {
                            if (value.data.code === 1){
                                this.tPrinters=value.data.data;
                                this.dialogFormVisible = true;
                            }
                        })
                    }
                })
            },
            //点击确定
            saveTOrderC(){
                axios.post("/addTPrinter",this.tOrder).then(value => {
                    if (value.data.code === 1){
                        this.$message("加入到激光码生产列表成功!");
                    }
                })
                this.bb();
            },
            bb(){
                console.log("111");
                this.dialogFormVisible = false;
                this.dialogVisible = true;
                console.log("222");
            },
            //关闭对话框时调用
            aa(){
                this.dialogFormVisible = false;
                this.selectPage();
                console.log("333");
            },
            cc(){
                this.dialogVisible = false;
                this.selectPage();
            },
            //页面跳转
            go(){
                location.href='/maxuejiao/sc_jgm';
            },
            //清理
            clean(){
                this.dialogFormVisible = false;
                this.dialogVisible = false;
                this.tOrder = null;
                console.log("444");
            },
        },
        mounted(){
            this.selectPage();
        },
    })
</script>
</body>
</html>